<template>
  <div class="select-language">
    <select class="r-language" :value="rLanguage"
     @change="$emit('rLanChange',$event.target.value)">
      <slot name="r-lang"  v-for="(lang,index) in languages" 
      :lang="lang" :index="index"></slot>
    </select>
    <div style="margin:0 10px">></div>
    <select class="n-language" :value="nLanguage"
     @change="$emit('nLanChange',$event.target.value)">
     <slot name="n-lang"  v-for="(lang,index) in languages" 
      :lang="lang" :index="index"></slot>
    </select>
  </div>
</template>

<script>
export default {
  name: "SelectLanguage",
  props: {
    languages: {
      type: Object,
      default(){return{}},
    },
    rLanguage:{
      type:String,
      default:'en'
    },
     nLanguage:{
      type:String,
      default:'cn'
    }
  },
  data() {
    return {};
  },
  mounted(){
    // console.log(this.rLanguage);
  }
};
</script>

<style scoped>
.select-language {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

select {
  height: 40px;
  border-radius: 0;
  padding: 0px 14px;
  width: 50%;
  color: #f4f4f4;
  -webkit-appearance: none;
  /* text-align: center; */
  /* text-align-last: center; */
  background: #484848;
  outline: none;
}
select:hover {
  background: #444;
}
</style>
